<template>
  <div>
    <!-- 折叠面板 -->
    <el-collapse v-model="activeNames" @change="handleChange">
      <!-- 服务基本信息 -->
      <el-collapse-item title="服务基本信息" name="1" v-if="comid != null & my_role_id == 4">
        <el-form :model="ServiceInfoFormData" label-width="100px">
          <!-- 表单第一行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户编号">
                <el-input v-model="ServiceInfoFormData.com_id" :disabled="true" style="width:100%"></el-input>
              </el-form-item>
            </el-col>

             <el-col :span="12">
            <el-form-item label="服务类型">
              <el-select v-model="ServiceInfoFormData.svr_status" style="width:100%">
                <el-option label="咨询" :value="0"></el-option>
                <el-option label="建议" :value="1"></el-option>
                <el-option label="计划" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>

          <!-- 表单第二行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户名称">
                <el-input v-model="ServiceInfoFormData.company.com_name" style="width:100%" :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="满意度">
                <el-rate v-model="ServiceInfoFormData.svr_satisfy" :disabled="true"></el-rate>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 表单第三行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="概要">
                <el-input v-model="ServiceInfoFormData.svr_title" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 表单第四行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="服务请求">
                <el-input
                  v-model="ServiceInfoFormData.svr_content"
                  type="textarea"
                  style="width:100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 表单第四行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="创建人">
                <el-input v-model="ServiceInfoFormData.svr_createcode" style="width:100%" :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="创建时间">
                <el-date-picker
                  type="date"
                  v-model="ServiceInfoFormData.svr_createtime"
                  style="width: 100%;"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 服务归档按钮 -->
          <el-form-item>
            <el-row>
              <el-col :span="4" :offset="20">
                <el-button
                  round
                  type="success"
                  @click="submitServiceInfoForm()"
                  style="width: 100%" 
                >服务归档</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-collapse-item>

      <!-- 服务分配 -->
      <!-- 点击查询用户名字用于分配 -->
      <el-collapse-item title="服务分配" name="2" v-if="comid != null && my_role_id == 3">
        <el-form  label-width="100px" :model="ServiceInfoFormData" :rules="rules" ref="ruleForm" >
          <!-- 表单第一行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="分配给" prop="svr_duecode">
                <el-select v-model="ServiceInfoFormData.svr_duecode" style="width:100%" >
                 <el-option v-for="item in userData" :key="item.user_id" :label="item.user_name" :value="item.user_name"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
 
            <el-col :span="12">
              <el-form-item label="分配时间" prop="svr_duetime">
                <el-date-picker
                  type="date"
                  v-model="ServiceInfoFormData.svr_duetime"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 提交表单按钮 -->
          <el-form-item>
            <el-row>
              <el-col :span="4" :offset="20">
                <el-button
                  round
                  type="primary"
                  @click="submitServiceAllocationForm('ruleForm')"
                  style="width: 100%"
                >分配服务</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-collapse-item>

      <!-- 服务处理 -->
      <el-collapse-item title="服务处理" name="3" v-if="comid != null && my_role_id == 4">
        <el-form  label-width="100px" :model="ServiceInfoFormData" :rules="rules" ref="ruleForm1">
          <!-- 表单第一行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="服务处理" prop="svr_dealway">
                <el-input v-model="ServiceInfoFormData.svr_dealway" type="textarea" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 表单第二行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理人">
                <el-input v-model="my" style="width:100%" :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="处理时间" prop="svr_dealtime">
                <el-date-picker
                  type="date"
                  v-model="ServiceInfoFormData.svr_dealtime"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 提交表单按钮 -->
          <el-form-item>
            <el-row>
              <el-col :span="4" :offset="20">
                <el-button
                  round
                  type="primary"
                  @click="submitServiceDisposeForm('ruleForm1')"
                  style="width: 100%"
                >处理服务</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-collapse-item>

      <!-- 服务反馈 -->
      <el-collapse-item title="服务反馈" name="4" v-if="comid != null && my_role_id == 4">
        <el-form :model="ServiceInfoFormData" label-width="100px" :rules="rules" ref="ruleForm2">
          <!-- 表单第一行 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理结果" prop="svr_dealresult">
                <el-input v-model="ServiceInfoFormData.svr_dealresult" style="width:100%"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="满意度" prop="svr_satisfy">
                <el-rate v-model="ServiceInfoFormData.svr_satisfy" ></el-rate>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 提交表单按钮 -->
          <el-form-item>
            <el-row>
              <el-col :span="4" :offset="20">
                <el-button
                  round
                  type="primary"
                  @click="submitServiceFeedbackForm('ruleForm2')"
                  style="width: 100%"
                  
                >反馈服务</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-collapse-item>

      <!-- 归档服务 -->
      <el-collapse-item title="归档服务" name="5">
          <el-table
          :data="pageInfo.list"
          highlight-current-row
          stripe
          border
          style="width: 100%"
        >
          <el-table-column property="svr_id" label="序号" align="center"></el-table-column>

          <el-table-column property="com_id" label="客户编号" align="center"></el-table-column>

          <el-table-column property="company.com_name" label="客户名称" align="center"></el-table-column>

          <el-table-column property="svr_title" label="概要" align="center"></el-table-column>
          <el-table-column property="svr_content" label="服务请求" align="center"></el-table-column>

          <el-table-column  label="服务类型" align="center">
            <div slot-scope="scope">
              <span v-if="scope.row.svr_status==0">
                  咨询
              </span>
               <span v-else-if="scope.row.svr_status==1">
                  建议
              </span>
               <span v-else>
                  计划
              </span>
              </div>
          </el-table-column>

          <el-table-column property="svr_createcode" label="创建人" align="center"></el-table-column>

          <el-table-column property="svr_createtime" label="创建时间" align="center" type="date"></el-table-column>
          <el-table-column property="svr_duecode" label="被分配人" align="center"></el-table-column>
          <el-table-column property="svr_duetime" label="分配时间" align="center"></el-table-column>
          <el-table-column property="svr_dealway" label="服务处理" align="center"></el-table-column>
          <el-table-column property="svr_dealcode" label="处理人" align="center"></el-table-column>
          <el-table-column property="svr_dealtime" label="处理时间" align="center"></el-table-column>
          <el-table-column property="svr_dealresult" label="处理结果" align="center"></el-table-column>
        </el-table>
        <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[2, 10, 20, 30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      my:"",
      my_role_id:'',
      
      //归档服务数据
      pageInfo: {
      },
      currentPage: 1,
      pageSize: 2,    
      comid:"",
      // 查询类型
      selectKey: {
        type: "",
        value: ""
      },

      // 折叠面板默认打开项
      activeNames: ["1","5"],

      // “服务信息”表单数据
      ServiceInfoFormData: 
      {
        svr_id:"",
        com_id:"",
        svr_title:"",
        svr_content:"",
        svr_status:"",
        svr_createtime:"",
        svr_createcode:"",
        svr_duecode:"",
        svr_duetime:"",
        svr_dealcode:"",
        svr_dealtime:"",
        svr_dealway:"",
        svr_dealresult:"",
        svr_satisfy:"", 
        company:{
        }
      },
      //用户信息集合
      userData: {

      },
      //表单验证
      rules: {
      svr_duecode:[
        {required: true, message: '请选择需要分配的人', trigger: 'change'}
      ],
      svr_duetime: [
            { required: true, message: '请选择分配时间', trigger: 'change' }
          ],
      svr_dealway: [
        {required: true, message: '请输入处理内容', trigger: 'blur'}
      ],
      svr_dealtime:[
        {required: true, message: '请选择处理时间', trigger: 'change'}
      ],
      svr_dealresult:[
        {required: true, message: '请输入处理结果', trigger: 'blur'}
      ],
      svr_satisfy:[
        {required: true, message: '请选择满意度', trigger: 'blur'}
      ]
      }
    };
  },

  methods: {
    
   
    selectById() {
      this.$axios
        .get("/selById/" + this.comid, {
          
        })
        .then((res) => {
          this.ServiceInfoFormData = res.data.data;          
        })
        .catch((error) => {});
    },
     companyname() {
      //alert(this.ServiceInfoFormData.com_id)
   this.$axios.get("/companies/" + this.ServiceInfoFormData.com_id)
   .then((res)=> {
        this.companyData = res.data.data
        
      }).catch((error)=> {})
   },
   selusername() {
      this.$axios
        .get("/users/selwork", {
          
        })
        .then((res) => {
          this.userData = res.data.data; 
        })
        .catch((error) => {});
   },
    
    // 折叠面板展开情况变化监听
    handleChange(val) {
      console.log(val);
    },

    // 服务归档
    submitServiceInfoForm() {
      this.$axios
      .put("/ass",this.ServiceInfoFormData, {
      })
      .then((res)=> {  
      if(this.ServiceInfoFormData.svr_satisfy < 3) {
      this.$notify.error({
        title:"错误",
        message:"满意度小于3不能归档"
      });
      }
      else {
        this.$notify({
        title:"成功",
        message:"服务归档成功",
        type: 'success'
      });
      }
      })
      .catch((error)=> {
        })
    },

    // 分配服务
    submitServiceAllocationForm(ruleForm) {
      this.$refs[ruleForm].validate((valid)=>{
        if(valid) {
          this.$axios
      .put("/ass",this.ServiceInfoFormData, {
      })
      .then((res)=> {
        this.$notify({
        title:"成功",
        message:"任务分配成功",
        type: 'success'
      });
      
      })
      .catch((error)=> {
        this.$notify.error({
          title:"错误",
        message:"任务分配失败"
        })
        })
        } else {
          console.log("error submit")
          return false
        }
      })
      
    },

    // 处理服务
    submitServiceDisposeForm(ruleForm1) {
      this.ServiceInfoFormData.svr_dealcode = this.my
      this.$refs[ruleForm1].validate((valid)=> {
        if(valid) {
          this.$axios
      .put("/ass",this.ServiceInfoFormData, {
      })
      .then((res)=> {
        this.$notify({
        title:"成功",
        message:"服务处理成功",
        type: 'success'
      });
      
      })
      .catch((error)=> {
        this.$notify.error({
          title:"错误",
        message:"服务处理失败",
        })
        })
        } else {
           console.log("error submit")
          return false
        }
      })
      
    },

    // 反馈服务
    submitServiceFeedbackForm(ruleForm2) {
      this.$refs[ruleForm2].validate((valid)=> {
        if(valid) {
          this.$axios
      .put("/ass",this.ServiceInfoFormData, {
      })
      .then((res)=> {
        this.$notify({
        title:"成功",
        message:"反馈服务成功",
        type: 'success'
      });
      
      })
      .catch((error)=> {
        this.$notify.error({
          title:"错误",
          message:"反馈服务失败",
        })
      })
        } else {
          console.log("error submit")
          return false
        }
      })
      
    },
    //服务归档
   selAll() {
     this.$axios.get("/selall",
     {params:{
       currentPage: this.currentPage,
      pageSize: this.pageSize,
            
     }}
     ).then(resp=>{
            if(resp.data.status==1000){
              this.pageInfo = resp.data.data;
              console.log()
              // alert(this.userList)
            }
        }).catch(error=>{

        })
   },
   //val：每页的条目数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.selAll(); 
      console.log(`每页 ${val} 条`);
    },
    //val:当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selAll();
      console.log(`当前页: ${val}`);
    },
    
  },
  mounted() {
   this.comid = this.$route.params.svr_id;
   this.selectById();
   this.selusername();
   this.selAll()
  //获取当前登陆者name
  this.my = sessionStorage.getItem("user_name");
  // 获取当前登陆者role_id
  this.my_role_id = sessionStorage.getItem("role_id");
  //alert(this.my_role_id);
  
  }
};
</script>
